<template>
	<div>
		<div class="carEditorSubmit">
			<button type="submit" form="formReserce"  >确定</button>
		</div>
		<div class="page has-navbar has-tabbar" v-nav="{title: '车辆预定', showBackButton: true}">

			<div class="page-content padding-top reserve-margin">
				<div class="car-editor" ref="carEditor">

					<div class="reserve" >
						<form id="formReserce" @submit.prevent="submit" ><ul>
							<li>
								<div class="car-editor-title">
									销售信息
								</div>
								
								<list>
									<item>
										<!---->
										<div class="car-enitor-tr active" @click="orderSaleTypeFn">
											<div class="car-editor-name">销售类型</div>
											<div class="car-editor-input">
												{{getJson.params.orderSaleType | filterOrderSaleType}}
												<span v-if="!getJson.params.orderSaleType" class="placeholder">请选择销售类型</span>
											</div>
											<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
										</div>
									</item>
									<item>
										<div class="car-enitor-tr active">
											<div class="car-editor-name">成交日期</div>
											<div class="car-editor-input"><input type="date" v-model="getJson.params.orderDealDate" placeholder="请选择成交日期" required /></div>
											<div class="car-editor-right"></div>
										</div>
									</item>
									<item>
										<div class="car-enitor-tr active" @click="orderDealUserIdFn">
											<div class="car-editor-name">成交员工</div>
											<div class="car-editor-input">
												<input type="text" v-model="getJson.getParams.orderDealUserId.value" required readonly placeholder="请选择成交员工" />
											</div>
											<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
										</div>
									</item>
									<item>
										<div class="car-enitor-tr active">
											<div class="car-editor-name">成交价格</div>
											<div class="car-editor-input"><input type="number" required="required" step="0.01" min="0.01" max="99999.99" placeholder="请填写成交价格" v-model="getJson.params.orderPrice" /></div>
											<div class="car-editor-right">万元</div>
										</div>
									</item>
									<item>
										<div class="car-enitor-tr">
											<div class="car-editor-name">定金</div>
											<div class="car-editor-input"><input type="number"  min="0.01" step="0.01" max="99999.99" placeholder="请填写定金" v-model="getJson.params.orderDeposit" /></div>
											<div class="car-editor-right">万元</div>
										</div>
									</item>
									<item>
										<div class="car-enitor-tr">
											<div class="car-editor-name">备注</div>
											<div class="car-editor-input"><input type="text" placeholder="请填写备注" v-model="getJson.params.orderRemark" /></div>
											<div class="car-editor-right"></div>
										</div>
									</item>
								</list>
							</li>
							<li>
								<div class="car-editor-title">
									客户信息
								</div>
								<list>
									<item>
										<div class="car-enitor-tr">
											<div class="car-editor-name">联系电话</div>
											<div class="car-editor-input"><input type="number" placeholder="请录入电话" v-model.number="getJson.params.orderBuyerMobile"  /></div>
											<div class="car-editor-right"></div>
										</div>
									</item>
									<item>
										<div class="car-enitor-tr">
											<div class="car-editor-name">客户名称</div>
											<div class="car-editor-input"><input type="text" pattern="/^\S{0,20}/" placeholder="最多支持录入20个字符" v-model="getJson.params.orderBuyerName"  /></div>
											<div class="car-editor-right"></div>
										</div>
									</item>
									<item>
										<div class="car-enitor-tr " @click="channelIdFn">
											<div class="car-editor-name">客户来源</div>
											<div class="car-editor-input">
												<input type="text" v-model="getJson.getParams.channelId.value" readonly placeholder="请选择客户来源" />
											</div>
											<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
										</div>
									</item>
									<item>
										<div class="car-enitor-tr" @click="provinceIdFn">
											<div class="car-editor-name">归属地</div>
											<div class="car-editor-input">{{getJson.getParams.provinceId.value}} {{getJson.getParams.cityId.value}}<span v-if="!getJson.getParams.cityId.value" class="placeholder">请选择归属地(省)(市)</span></div>
											<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
										</div>
									</item>
									<item>
										<div class="car-enitor-tr">
											<div class="car-editor-name">证件号</div>
											<div class="car-editor-input"><input type="tel" placeholder="请填写证件号" maxlength="18" v-model.number="getJson.params.orderBuyerCardNo" /></div>
											<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
										</div>
									</item>
								</list>
							</li>
							<li>
								<div class="car-editor-title">
									保险信息

								</div>
								<list>
									<item>
										<div class="car-enitor-tr">
											<div class="car-editor-name">是否代办保险</div>
											<div class="car-editor-input"></div>
											<div class="car-editor-right">
												<div class="item item-borderless item-toggle von-toggle">
													<label class="toggle toggle-balanced">
											            <input type="checkbox" v-model="orderInsuranceState">
											            <div class="track">
											            	<div class="handle"></div>
											            </div>
											        </label>
												</div>
											</div>
										</div>
									</item>
								</list>
								<div v-if="orderInsuranceState">
									<list>
										<item>
											<div class="car-enitor-tr active" @click="orderInsuranceCompanyFn">
												<div class="car-editor-name">保险公司</div>
												<div class="car-editor-input">
													<input type="text" v-model="getJson.getParams.orderInsuranceCompany.value" required readonly placeholder="请选择保险公司" />
												</div>
												<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
											</div>
										</item>
										<item>
											<div class="car-enitor-tr active">
												<div class="car-editor-name">商业险</div>
												<div class="car-editor-input"><input type="number" step="0.01" min="0.01" max="99999.99" v-model.number="getJson.params.orderBusinessInsurPrice" placeholder="请输入金额" required /></div>
												<div class="car-editor-right">元</div>
											</div>
										</item>
										<item>
											<div class="car-enitor-tr active">
												<div class="car-editor-name">交强险</div>
												<div class="car-editor-input"><input type="number" step="0.01" min="0.01" max="99999.99" v-model.number="getJson.params.orderForceInsurPrice" placeholder="请输入金额" required /></div>
												<div class="car-editor-right">元</div>
											</div>
										</item>
									</list>
								</div>
							</li>

						</ul></form>

						<!--<brand></brand>-->
					</div>
				</div>

			</div>
		</div>
		<transition name="bottom" v-for="(item,index) in getJson.paramsIs">
			<keep-alive>
				<modal :paramsIs="getJson.paramsIs" :itemIndex="index" />
			</keep-alive>
		</transition>
	</div>
</template>

<script>
	import { bus } from 'bus.js'
	import modal from 'src/assembly/modalList.vue'
	import brand from 'src/assembly/brand.vue'
	
	export default {
		data: function() {
			return {
				getJson: {
					params: {
						//预定id
						carId: undefined,
						//销售类型
						orderSaleType:undefined,
						//成交日期
						orderDealDate: undefined,
						//成交员工
						orderDealUserId:undefined,
						//成交价格
						orderPrice: undefined,
						//定金
						orderDeposit: undefined,
						//备注
						orderRemark: undefined,
						//联系电话
						orderBuyerMobile: undefined,
						//客户名称
						orderBuyerName: undefined,
						//客户来源
						channelId: undefined,
						//归属地 （省）
						provinceId: undefined,
						//归属地 （市）
						cityId: undefined,
						//证件号
						orderBuyerCardNo: undefined,
						//保险信息
						orderInsuranceState: 0,
						//保险公司
						orderInsuranceCompany: undefined,
						//商业险
						orderBusinessInsurPrice: undefined,
						//交强险
						orderForceInsurPrice: undefined,
						//用户id
						userId:sess.get('userSession').userId,
					},
					getParams: {
						orderSaleType: {
							value: '',
							id: ''
						},
						orderDealUserId: {
							value: '',
							id: ''
						},
						channelId: {
							value: '',
							id: ''
						},
						provinceId: {
							value: '',
							id: ''
						},
						cityId: {
							value: '',
							id: ''
						},
						orderInsuranceCompany: {
							value: ''
						}
					},
					paramsIs: []
				},
				orderInsuranceState: false,

			}

		},
		methods: {
			busOn() {
				bus.$off('orderSaleType')
				bus.$off('orderDealUserId')
				bus.$off('provinceId')
				bus.$off('cityId')
				bus.$off('channelId')
				bus.$off('orderInsuranceCompany')
				bus.$on('orderSaleType', (index) => {
					this.getJson.params.orderSaleType = this.getJson.paramsIs[0].list[index].id
					this.getJson.paramsIs = []
				})
				bus.$on('orderDealUserId', (index) => {
					this.getJson.getParams.orderDealUserId.value = this.getJson.paramsIs[0].list[index].name
					this.getJson.params.orderDealUserId = this.getJson.paramsIs[0].list[index].id
					this.getJson.paramsIs = []
				})
				bus.$on('provinceId', (index) => {
					this.getJson.getParams.provinceId.value = this.getJson.paramsIs[0].list[index].name
					this.getJson.params.provinceId = this.getJson.paramsIs[0].list[index].id
					this.getJson.getParams.cityId.value = ''
					this.getJson.params.cityId = ''
					window.axios.get(baseUrl + '/controller/area/city', {
						params: {
							provinceId: this.getJson.params.provinceId
						}
					}).then((res) => {
						this.getJson.paramsIs.push({
							list: [],
							title: '归属地(市)',
							emit: 'cityId',
						})
						for(let item of res.data.result) {
							this.getJson.paramsIs[1].list.push({
								name: item.cityName,
								id: item.cityId
							})
						}
					})
				})
				bus.$on('cityId', (index) => {
					this.getJson.getParams.cityId.value = this.getJson.paramsIs[1].list[index].name
					this.getJson.params.cityId = this.getJson.paramsIs[1].list[index].id
					this.getJson.paramsIs = []
				})
				bus.$on('channelId', (index) => {
					this.getJson.getParams.channelId.value = this.getJson.paramsIs[0].list[index].name
					this.getJson.params.channelId = this.getJson.paramsIs[0].list[index].id
					this.getJson.paramsIs = []
				})
				bus.$on('orderInsuranceCompany', (index) => {
					this.getJson.params.orderInsuranceCompany = this.getJson.paramsIs[0].list[index].id
					this.getJson.getParams.orderInsuranceCompany.value = this.getJson.paramsIs[0].list[index].name
					this.getJson.paramsIs = []
				})
			},
			// 销售类型			
			orderSaleTypeFn() {
				this.getJson.paramsIs.push({
					list: [{
						name: '批发',
						id: '1'
					}, {
						name: '直销',
						id: '2'
					}, {
						name: '拍卖',
						id: '3'
					}], //1：批发、2：直销、3：拍卖
					title: '销售类型',
					emit: 'orderSaleType',
				})

			},
			// 成交人员
			orderDealUserIdFn() {
				window.axios.get(baseUrl + '/controller/getUserList', {
					params: {
						shopId: this.userSession.shopId ? this.userSession.shopId : ''
					}
				}).then((res) => {
					this.getJson.paramsIs.push({
						list: [],
						title: '成交人员',
						emit: 'orderDealUserId',
					})
					for(let item of res.data.result) {
						this.getJson.paramsIs[0].list.push({
							name: item.userName,
							id: item.userId
						})
					}
				})

			},
			//客户来源
			channelIdFn() {
				window.axios.get(baseUrl + '/crm-web/controller/sysParam/channel-list', {params:{marketId:sess.get('userSession').marketId,channelState:1, shopId: sess.get('userSession').shopId}}).then((res) => {
					this.getJson.paramsIs.push({
						list: [],
						title: '客户来源',
						emit: 'channelId',
					})
					for(let item of res.data.result) {
						this.getJson.paramsIs[0].list.push({
							name: item.channelName,
							id: item.channelId
						})
					}
				})
			},

			//归属地
			provinceIdFn() {
				window.axios.get(baseUrl + '/controller/area/province').then((res) => {
					this.getJson.paramsIs.push({
						list: [],
						title: '归属地(省)',
						emit: 'provinceId',
					})
					for(let item of res.data.result) {
						this.getJson.paramsIs[0].list.push({
							name: item.provinceName,
							id: item.provinceId
						})
					}
				})
			},
			// 保险公司
			orderInsuranceCompanyFn() {
				window.axios.get(baseUrl + '/crm-web/controller/sysParam/insurance-list').then((res) => {
//					console.log(res)
					this.getJson.paramsIs.push({
						list: [],
						title: '保险公司',
						emit: 'orderInsuranceCompany',
					})
					this.getJson.paramsIs[0].list = res.data.result.map(item => ({name: item.insuranceName, id: item.insuranceId}))
				})
			},
			submit() {
				if(!(this.getJson.params.orderSaleType)){
					$toast.show('请选择销售类型', 2000)
					return
				}
				if(!(this.getJson.getParams.orderDealUserId.value)){
					$toast.show('请选择成交员工', 2000)
					return
				}
				
				$dialog.confirm({
					// 标题					
					title: '提示',
					content: '是否提交',
					// 取消按钮文本
					cancelText: '取消',
					// 确定按钮文本
					okText: '提交'
				}).then((res) => {
					if(res) {
//						console.log(this.getJson.params)
						window.axios.get(baseUrl + '/controller/insertCarOrder', {
							params: this.getJson.params
						}).then((res) => {
//							console.log(res)
							if(res){
								setTimeout(()=>{
									$toast.show('提交成功', 2000)
									setTimeout(()=>{
										this.$router.go(-1)
									},2000)
								},400)
							}
						})
					}
				})
			},
			queryRouter() {
				this.getJson.params.carId = this.$route.query.params.carId
			},
			dateInit() {
				this.queryRouter()
				var time = new Date()
				var n = time.getFullYear().toString()
				var y = time.getMonth()
				var r = time.getDate()
				y++
				y = y < 10 ? '0' + y : y
				r = r < 10 ? '0' + r : r
				return n + '-' + y + '-' + r
			},
			userIs() {
				if(!(this.userSession)) {
					$toast.show('请登录', 2000).then(() => {

					})
					setTimeout(() => {
						this.$router.push({
							path: '/'
						})
					}, 1000)

				}
				//			console.log(this.$router)
				if(!(this.$route.query.params.carId)) {
					$toast.show('获取失败', 2000).then(() => {

					})
					setTimeout(() => {
						this.$router.go(-1)
					}, 1000)

				}
			}
		},
		components: {
			modal,
			brand
		},
		computed: {
			// 获取tab标签dom
			userSession() {
				return sess.get('userSession')
			}
		},
		mounted() {
			this.userIs()
			this.busOn()
			this.getJson.params.orderDealDate = this.dateInit()
//			console.log(this.$route.query.params)
		},
		watch: {
			'orderInsuranceState': function() {
				this.getJson.params.orderInsuranceState = this.orderInsuranceState ? '1' : '0'
				if(this.orderInsuranceState) {
					this.$nextTick(() => {
						this.$refs.carEditor.scrollTop = this.$refs.carEditor.scrollTop + 190
					})

				}
			}
		},
		

	}
</script>